<template lang="html">
  <div>
    <sui-card-group :items-per-row="4">
      <sui-card class="red">
        <sui-image src="static/images/wireframes/image.png" />
      </sui-card>
      <sui-card class="orange">
        <sui-image src="static/images/wireframes/image.png" />
      </sui-card>
      <sui-card class="yellow">
        <sui-image src="static/images/wireframes/image.png" />
      </sui-card>
      <sui-card class="olive">
        <sui-image src="static/images/wireframes/image.png" />
      </sui-card>
      <sui-card class="green">
        <sui-image src="static/images/wireframes/image.png" />
      </sui-card>
      <sui-card class="teal">
        <sui-image src="static/images/wireframes/image.png" />
      </sui-card>
      <sui-card class="blue">
        <sui-image src="static/images/wireframes/image.png" />
      </sui-card>
      <sui-card class="violet">
        <sui-image src="static/images/wireframes/image.png" />
      </sui-card>
      <sui-card class="purple">
        <sui-image src="static/images/wireframes/image.png" />
      </sui-card>
      <sui-card class="pink">
        <sui-image src="static/images/wireframes/image.png" />
      </sui-card>
      <sui-card class="brown">
        <sui-image src="static/images/wireframes/image.png" />
      </sui-card>
      <sui-card class="grey">
        <sui-image src="static/images/wireframes/image.png" />
      </sui-card>
      <sui-card class="black">
        <sui-image src="static/images/wireframes/image.png" />
      </sui-card>
    </sui-card-group>
  </div>
</template>

<script>
export default {
  name: 'ColoredCardExample',
};
</script>
